<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	template="/layout/template.xhtml" xmlns:a4j="http://richfaces.org/a4j">
	<ui:define name="stylefms">
		<link href="/stylesheet/theme.css" rel="stylesheet" type="text/css" />
		<link href="/stylesheet/fms.css" rel="stylesheet" type="text/css" />
		<link href="/stylesheet/panel.css" rel="stylesheet" type="text/css" />
		<link href="/stylesheet/debug.css" rel="stylesheet" type="text/css" />
	</ui:define>
	<ui:define name="varProjectName">
		<ui:param name="projectName"
			value="#{appRes['mod.fms.fms.maintenances.usariosRoles']}" />
	</ui:define>

	<ui:define name="body">

				
		<a4j:form id="UserRoleForm" ajaxSingle="true">
		
			<!-- ************************************ -->
			<!-- *****  UserRole HEADER  ***** -->
			<!-- ************************************ -->
			<rich:panel styleClass="form">
			<f:facet name="header"><h:outputText value="Usuario" /></f:facet>
					<h:panelGrid columns="2" style=" width : 70%;">
						<h:panelGrid columns="1"						>
						<s:decorate template="/layout/input.xhtml">
							<ui:define name="label">Usuario</ui:define>
							<rich:comboBox value="#{editUserRole.userRole.userData}"
								converter="#{usersConverter}"
								id="UserRoleUser" required="true" width="120px"
								requiredMessage="Favor seleccione el usuario"
								enableManualInput="true"
								defaultLabel="Usuario">
								<a4j:support event="onselect"/>
									<s:selectItems value="#{withinHolder.userList()}" var="user"  label="#{user.userName}"></s:selectItems>
							</rich:comboBox>
							<div class="msg_container">
								<rich:message for="UserRoleUser" />
							</div>
						</s:decorate>
						<div style="clear: both;" />
						
					</h:panelGrid>
				</h:panelGrid>
					
			</rich:panel>
		</a4j:form>


		<!-- *************************************** -->
		<!-- *********  UserRole DETAIL  ********* -->
		<!-- *************************************** -->
			
		<a4j:form id="UserRoleDetForm" ajaxSingle="true">
			<rich:panel styleClass="form">
			<f:facet name="header"><h:outputText value="Agregar Detalle" /></f:facet>
				<h:panelGrid>
					<h:panelGrid columns="1">
						<s:decorate template="/layout/input.xhtml">
							<ui:define name="label">Perfil</ui:define>
							<rich:comboBox value="#{editUserRole.userRole.roleData}"
								converter="#{rolesConverter}"
								id="UserRoleRole" required="true" width="120px"
								requiredMessage="Favor seleccione el pefil"
								enableManualInput="true"
								defaultLabel="Perfil">
									<a4j:support event="onselect" ajaxSingle="true" reRender="UserRoleDetForm"></a4j:support>
							
		
									<s:selectItems value="#{withinHolder.roleList()}" var="role"  label="#{role.descrip}"></s:selectItems>
							</rich:comboBox>
							<div class="msg_container">
								<rich:message for="UserRoleRole" />
							</div>
						</s:decorate>
						<div style="clear: both;" />
						
											
						<s:decorate template="/layout/input.xhtml">
							<ui:define name="label">Activo</ui:define>
							<h:selectBooleanCheckbox id="UserRoleDetIsActive"
								value="#{editUserRole.userRole.status}">
								<a4j:support event="onblur" />
								<a4j:support event="onclick" ajaxSingle="true">
									<s:conversationId />
								</a4j:support>
							</h:selectBooleanCheckbox>
							<div class="msg_container">
								<rich:message for="UserRoleDetIsActive" />
							</div>
						</s:decorate>	
						
					</h:panelGrid>
					
						<s:decorate template="/layout/displayButton.xhtml" styleClass="button_form">
							<a4j:commandButton id="AddDet" value="Agregar" styleClass="button" immediate="false"
							action="#{editUserRole.addUsersRolesList()}" reRender="UserRoleDetForm, DetGridForm, UserRoleForm" />
							
						
		
							<rich:spacer width="20px" />
							
							<a4j:region id="DetDelRegion">
								<a4j:commandButton value="Eliminar Seleccionados" action="#{editUserRole.deleteDet()}"
									reRender="DetGridForm" styleClass="button" />
							</a4j:region>
		
						</s:decorate>
				</h:panelGrid>
			</rich:panel>
		</a4j:form>
		
		<a4j:form id="DetGridForm" ajaxSingle="true">
			<rich:datascroller align="center" for="DetGrid"
				maxPages="15" page="#{dataTableScrollerBean.scrollerPage}"
				renderIfSinglePage="false" />
					   			
			<div style="clear: both;" />
			<rich:panel styleClass="table_add" rendered="#{not empty editUserRole.usersRolesList}">
			<rich:dataTable id="DetGrid"
				var="det" rows="3"
				value="#{editUserRole.usersRolesList}"
				rendered="#{not empty editUserRole.usersRolesList}"
				rowClasses="rvgRowOne,rvgRowTwo"
				style="width:70%; margin-left:15%;">
				
				<rich:column>
					<f:facet name="header"><h:outputText value="Usuario" /></f:facet>
					
					<h:outputText value="#{det.userData.userName}" />
				</rich:column>
				
				
				<rich:column>
					<f:facet name="header"><h:outputText value="Perfil" /></f:facet>
					
					<h:outputText value="#{det.roleData.descrip}" />
				</rich:column>
				

				<rich:column>
					<f:facet name="header"><h:outputText value="Activo" /></f:facet>
					
					<h:outputText value="#{convertAssist.booleanToString(det.status)}" />
				</rich:column>
				
				<rich:column>
					<f:facet name="header"><h:outputText value="Operaciones" /></f:facet>
					
					<h:selectBooleanCheckbox id="check" value="#{det.selected}" immediate="false" >
						
						<a4j:support event="onmouseover" ajaxSingle="true">
							<a4j:actionparam name="remove" value="#{det}" assignTo="#{editUserRole.userRoleToDelete}"></a4j:actionparam>
						</a4j:support>
						
						<a4j:support id="checkSupport" event="onchange" ajaxSingle="true"  action="#{editUserRole.detToDelete(det)}">
						</a4j:support>
						
					</h:selectBooleanCheckbox>
					<rich:toolTip value="Seleccionar elemento a eliminar" for="check" />
				</rich:column>

			</rich:dataTable>
			</rich:panel>
			
		</a4j:form>
		
		<a4j:region>		
		<a4j:form id="DetAction" ajaxSingle="true">
		<rich:panel styleClass="action_form">
			<h:panelGrid>
				<s:decorate template="/layout/displayButton.xhtml"
					styleClass="button_form">
					<a4j:commandButton value="Guardar" id="SaveButton"
						action="#{editUserRole.saveNewData()}"
						styleClass="button" reRender="UserRoleForm, UserRoleDetForm, DetGridForm" process="UserRoleForm" status="stateStatus">
						
					</a4j:commandButton>
					<rich:spacer width="5px" />
					<a4j:status id="stateStatus" styleClass="status_msg">
							<f:facet name="start">
								<h:graphicImage value="/img/ajax/ajax_load_02.gif"/>
							</f:facet>
					</a4j:status>
					<rich:spacer width="20px" />
					<a4j:commandButton value="Cancelar"
						action="#{editUserRole.cancelData()}"
						reRender="UserRoleForm" styleClass="button"
						oncomplete="window.location.reload()"/>

				</s:decorate>
			</h:panelGrid>
			</rich:panel>
		</a4j:form>
		</a4j:region>

		

	</ui:define>
</ui:composition>